$(function(){
    var currentpage = 1;
    var pageSize = 5;
    // 渲染页面
    function render(){
        $.ajax({
            url:'/category/querySecondCategoryPaging',
            type:'get',
            data:{
                page:currentpage,
                pageSize:pageSize
            },
            dataType:'json',
            success:function(res){
                // console.log(res);
                $('tbody').html(template('temp',res))
                setPage(res)
            }
    
        })
    }
    render()

// 引入页码
function setPage (res){
    $("#paginator").bootstrapPaginator({
        bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
        currentPage:currentpage,//当前页
        totalPages:Math.ceil(res.total/pageSize),//总页数
        size:"small",//设置控件的大小，mini, small, normal,large
        onPageClicked:function(event, originalEvent, type,page){
          //为按钮绑定点击事件 page:当前点击的按钮值
          currentpage = page
          render()
        }
    })
}

// 添加按钮功能设置后，模态框的动态显示
// 1，配备基本样式
    // 1.1 一级菜单下拉框的实现思路：利用插件取得基本样式--设置隐藏域用来存放数据--通过ajax+模板引擎的方式渲染数据
    // 1.2设置菜单的选中效果：将所选一级类名的值传给按钮，把所选一级类的id传送给隐藏域(还需设置下拉框的清空状态--后续完善操作)
    // ！！需要新建模板引擎！！！
    $.ajax({
        url:'/category/queryTopCategoryPaging',
        type:'get',
        data:{
            page:1,
            pageSize:100
        },
        dataType:'json',
        success:function(res){
            // console.log(res);
            $('.one-list').html(template('temp-one',res))
        }
    })
// 设置下拉框的选中操作-给下拉框的a标签注册点击事件---因为是动态生成的内容，所以需要使用委托事件
$('.one-list').on('click','a',function(){
    // console.log('选取成');
    // 置换了按钮的名称
    $('.one-list-span').text($(this).text())
    // 给隐藏域传送了id
    $('#categoryId').val($(this).data('id'))
    // console.log( $('#categoryId').val());
    $("#addform").data('bootstrapValidator').updateStatus('categoryId', 'VALID')

})

// 通过fileupload插件上传图片
$("#file").fileupload({
    dataType:"json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done:function (e, data) {
      console.log(data);
       //   改变图片路径，以正确显示图片
      $('.two-img').attr('src',data.result.picAddr)
//    将图片地址保存在隐藏域中
      $('#brandLogo').val(data.result.picAddr)
      $("#addform").data('bootstrapValidator').updateStatus('brandLogo', 'VALID')
    }
});

// 通过validatOr对表单进行校验-----表单校验的时候，添加按钮一定是要与form表单关联了的type为submit的提交按钮
$('#addform').bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置//因为有隐藏域标签需要验证，所以要去掉隐藏和不可视部分的非验证
    excluded: [':disabled'],
  
    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
  
    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryId: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请输入一级分类'
          }
        }
      },
      brandName: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请输入分类名称'
          }
        }
      },
      brandLogo: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请上传分类图片'
          }
        }
      },
    }
  
  });

// 表单校验的清除




// 添加按钮注册事件
$('#addform').on('success.form.bv', function (e){
    $.ajax({
        url:'/category/addSecondCategory',
        type:'post',
        dataType:'json',
        data:$('#addform').serialize(),
        success:function(res){
            // console.log(res);
            render()
            $('#myModal').modal('hide')
        }
    })
})





})